<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>角色信息列表</title>
		<script src="js/global.js"></script>
	</head>

	<body>
		<!-- 表单搜素 -->
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">角色名称</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" name="name" id="name" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
				</div>
			</div>
			<input type="button" class="layui-btn" id="souBtn" value="搜索" />
		</div>

		<!-- 表格容器 -->
		<table id="demo" lay-filter="test"></table>

		<!-- 表格的头部工具条 -->
		<script type="text/html" id="barDemo1">
			<a class="layui-btn layui-btn" lay-event="add"><i class="layui-icon">&#xe608;</i>添加角色</a>
		</script>

		<!-- 表格的行内工具条 -->
		<script type="text/html" id="barDemo2">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="setquanxian"><i class="layui-icon">&#xe620;</i>设置权限</a>
			<a class="layui-btn layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe642;</i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
		</script>

		<!-- 添加的弹窗 -->
		<div id="tianjiachuang" style="display: none">
			<form class="layui-form" onsubmit="return false" id="tianjiaForm" lay-filter="tianjiaForm">
				<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
				<div class="layui-form-item">
					<label class="layui-form-label">角色名称</label>
					<div class="layui-input-inline">
						<input type="text" name="name" placeholder="请输入角色名称" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit lay-filter="tianjiabtn"><i class="layui-icon">&#xe605;</i>添加</button>
						<button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#x1006;</i>重置</button>
					</div>
				</div>
			</form>
		</div>

		<!-- 修改的弹窗 -->
		<div id="xiugaichuang" style="display: none">
			<form class="layui-form" onsubmit="return false" id="xiugaiForm" lay-filter="xiugaiForm">
				<div class="layui-form-item">
					<label class="layui-form-label">角色名称</label>
					<div class="layui-input-inline">
						<input type="text" name="name" placeholder="请输入角色名称" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit lay-filter="xiugaibtn"><i class="layui-icon">&#xe605;</i>修改</button>
						<button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">&#x1006;</i>重置</button>
					</div>
				</div>
				<!--  修改的表单中，需要放一个 隐藏域，用来储存id-->
				<input type="hidden" name="id" />

			</form>
		</div>


		<!--弹窗 设置模块时弹出-->
		<div id="treeDiv" style="display: none;">
			<!--树的容器-->
			<div id="test1"></div>
			<!--按钮-->
			<input type="button" id="setTreeBtn" value="保存"class="layui-btn" />
		</div>




		<!-- 脚本代码部分 -->
		<script>
			layui.use(['form', 'layer', 'table','tree'], function() {
				var form = layui.form;
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.$;
				var tree = layui.tree;

				//渲染表格
				table.render({
					elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
					page: true, //开启分页
					url: globalData.server + 'role/getRoleList', //数据接口
					where: {
						token: globalData.getToken()
					},
					method:"post",
					toolbar: '#barDemo1',
					cols: [
						[ //标题栏
							{
								checkbox: true
							}, {
								field: 'id',
								title: '角色编号',
								sort: true,
								width: 120
							}, {
								field: 'name',
								title: '角色名称',
								width: 120
							}, {
								toolbar: '#barDemo2',
								title: '操作'
							}
						]
					]
				});
				//渲染表格--end

				//搜索按钮的单击事件
				$("#souBtn").click(function() {
					//判断 区间的数据合理性
					if($("#min").val() > $("#max").val()) {
						alert("最高值不得高于起始值");
						return; //结束函数，下面的重载不会再执行
					}

					//表格重载
					table.reload('demo', {
						where: {
							name: $("#name").val(),
							min: $("#min").val(),
							max: $("#max").val()
						}
					});
				});
				//搜索按钮的单击事件-end

				//监听头部工具条
				table.on('toolbar(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var layEvent = obj.event; //获得 lay-event 对应的值
					if(layEvent === 'add') { //添加
						//弹窗
						layer.open({
							title: "您正在添加角色信息",
							type: 1,
							area: ['500px', '400px'],
							content: $('#tianjiachuang')
						});
					}
				});
				//监听头部工具条--end

				var rid = null;
				//监听行内工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					rid = data.id;
					
					if(layEvent === 'setquanxian') { //查看
						//弹窗
						layer.open({
							title: "您正在编辑模块信息",
							type: 1,
							area: ['400px', '450px'],
							content: $('#treeDiv')
						});
						
						//渲染树
						//向服务端发送请求
						$.post(globalData.server + "module/getModuleTreeByRoleId" ,{
							"token":globalData.getToken(),
							"roleId":rid
						}, function(res) {
							//渲染
							var inst1 = tree.render({
								elem:'#test1',//绑定元素
								data:res,//将结果渲染在页面
								showCheckbox:true,
								id:'demoId'//树的id，获取勾选数据时需要
							});
						})

					}else if(layEvent === 'detail') { //查看
						console.log(data)
						//数据展示在表单中
						form.val('xiugaiForm', data);
						//弹窗
						layer.open({
							title: "您正在修改角色信息",
							type: 1,
							area: ['500px', '400px'],
							content: $('#xiugaichuang')
						});

					} else if(layEvent === 'del') { //删除
						layer.confirm('真的删除此角色信息吗', {
							icon: 7
						}, function(index) {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
							var url = globalData.server+"role/delRole?token="+globalData.getToken();
							$.post(url, {
								id: data.id
							}, function(res) {
								if(res.code==0){
								 layer.msg(res.msg, {
								    icon: 1,
								    time: 2000
								}, function () {
								    layer.closeAll(); //关闭所有的窗口
									table.reload('demo', {}); //表格重载
								});
							}else if(res.code==2){
								layer.msg(res.msg, {
								    icon: 7,
								    time: 2000
								}, function () {
									layer.closeAll(); //关闭所有的窗口
									table.reload('demo', {}); //表格重载
								    //window.location.reload(); //刷新页面
								});
							}else{
								layer.msg(res.msg, {
								    icon: 1,
								    time: 2000
								}, function () {
								   layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
								});
							}
							}, "json");
						});
					}
				});
				//监听行内工具条---end

				var arr = new Array(); //用来存储选中的节点（id们）
				//自定义方法
				var active = {
					findChildren:function(node){
						if(node!=null){
							arr.push(node.id);//把节点的id添加到数组中
						}
						for (var i = 0;node.children!=null && i<node.children.length;i++) {
							active.findChildren(node.children[i]);//递归，自己调用自己
						}
					}
				}


				//点击保存按钮时调用：（将勾选的模块保存给指定的角色）
				$("#setTreeBtn").click(function(){
					
					
					//获取选中的节点
					var checkData = tree.getChecked('demoId');
					console.log(checkData);
					//从节点书中，遍历，查找，组装为ids--每个节点的id组成的字符串
					for(var i = 0; i < checkData.length; i++) {
						var node = checkData[i];//父节点
						active.findChildren(node);
					}
					//拼接模块id组成的字符串
					var mids = arr.join(",");
					console.log(mids);
					
					//向服务端发送请求，重置角色模块
					$.post(globalData.server+"rolemodules/setModuleTreeByRoleId",{
						"rid":rid,//被操作的角色id
						"mids":mids,//模块id组成的字符串
						"token":globalData.getToken()
					},function(res){
						layer.msg(res.msg, {icon:1,time:1000},function(){
						layer.closeAll();
						//arr.length=0;
						parent.location.reload(); //刷新父页面
					   });
					})
					
				});//单机事件--结束

				

				//添加提交的 监听
				form.on('submit(tianjiabtn)', function(data) {
					var url = globalData.server+"role/addRole?token="+globalData.getToken();
					$.post(url, data.field, function(res) {
						if(res.code == 0) {
							layer.alert(res.msg, {
								icon: 1,
								time: 2000
							}, function() {
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						}else if(res.code == 2){
							layer.msg(res.msg, {
								icon: 7,
								time: 2000
							}, function() {
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						}else{
							layer.msg(res.msg, {
								icon: 7,
								time: 2000
							}, function() {
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						}
					}, "json");

					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				//添加提交的 监听---end

				//修改提交的监听
				form.on('submit(xiugaibtn)', function(data) {
					var url = globalData.server+"role/updateRole?token="+globalData.getToken();
					$.post(url, data.field, function(res) {
						if(res.code == 0) {
							layer.alert(res.msg, {
								icon: 6,
								time: 2000
							}, function() {
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						}else if(res.code == 2){
							layer.msg(res.msg, {
								icon: 7,
								time: 2000
							}, function() {
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						}else{
							layer.msg(res.msg, {
								icon: 7,
								time: 2000
							}, function() {
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						}
						/*layer.alert(res.msg, {
							icon: 6
						}, function() {
							layer.closeAll(); //关闭所有的窗口
							table.reload('demo', {}); //表格重载
						});*/
					}, "json");

					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				//修改提交的监听--end

			});
		</script>

	</body>

</html>